<template>
  <div class="p-2 bg-white" :style="contentStyle" >
    <!-- 搜索 -->
    <el-popover placement="bottom-start" width="1000" trigger="manual" v-model="visible"> 
      <el-form :inline="true" :model="search" label-width="90">
        <el-form-item label="客户档案号">
          <el-input v-model="search.cardid" class="width180"/>
        </el-form-item>
        <el-form-item label="客户姓名">
          <el-input v-model="search.name" class="width180"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item class="w-100">
            <el-button type="primary" @click="searchData">提交</el-button>
        </el-form-item>
      </el-form>
      <el-button slot="reference" type="primary" @click="visible=!visible">查询</el-button>
    </el-popover>
      <!-- 内容列表 -->
    <el-tabs v-model="mainActiveName" @tab-click="syschRecodeStatus">
      <el-tab-pane label="接诊中" name="1"/>
      <el-tab-pane label="已接诊" name="2"/>
    </el-tabs>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in tableData"  :key="item.id">
        <el-card  shadow="hover" :body-style="{padding:0}" class="rounded">
          <div class="position-relative clearfix pt-2" >
            <div class="pull-left ml-1 mt-1">
              <!-- <el-avatar :size="80"/> -->
              <el-image style="width:80px; height: 80px;border-radius:50%;" :src="'data:image/png;base64,'+ item.providerInfo.photo" fit="cover"></el-image>
            </div>
            <div class="pull-left ml font line-h-md text-muted  mb-1">
              <div class="font-weight font-lg" v-if="item.providerInfo">{{item.providerInfo.name}}</div>
              <div class="ml line-h-md">
                <div>{{item.providerInfo.sex === '1'? '男':'女'}}&nbsp;{{item.providerInfo.age}}岁</div>
                <div>病案号：{{item.providerInfo.cardId}}</div>
                <div>接诊医生：{{item.treatmentUserName}}</div>
                <div>治疗时间：</div>
                <div>接诊时间：{{timestampToTime(item.treatmentDate,'yy-mm-dd hh:mm:ss')}}</div>
              </div>
            </div>
            <div class="position-absolute right-1 top-3">
              <div class="bg-success rounded px-1 text-white font line-h-md">
                <div v-if="item.currentStatus === 0 "  >待接诊</div>
                <div v-else-if="item.currentStatus === 1 ">接诊中</div>
                <div v-else-if="item.currentStatus === 2">已接诊</div> 
              </div>
              <div class="bg-light-muted rounded px-1 text-white font mt-1 line-h-md">
                <div v-if="item.state === -1"> 未下发</div>
                <div v-else-if="item.state === 0"> 待检测</div> 
                <div v-else-if="item.state === 1"> 已检测</div>
              </div>
            </div>
          </div>
          <div  class="text-center py-1 line-h-md font-weight hoverIn cursor-pointer font-md">
            <div  @click="calling(item.id)" v-if="item.currentStatus === 0">叫号</div>
            <div  @click="openDetail(item)" v-else-if="item.currentStatus === 1">接诊</div>
            <div  @click="openDetail(item)"  v-else-if="item.currentStatus === 2">详情</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class='mt-1'>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[8,16,32,40,48,54,96]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"/>
    </div>
  </div>
</template>
<script>
import api from "plugins/axios/api.js";
import {queryTreatments,calling} from "plugins/axios/inquiryRecord.js"
import {mapState} from 'vuex'
export default {
  components: {},
  computed: {
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    contentStyle() {
      return {
        height:(this.clientHeight - 140)+'px',
      }
    }
  },
  data() {
    return {
      mainActiveName:'1',
      visible: false,/***搜索框显示和隐藏 */
      search:{
        cardid: "",
        name: "",
        time: [],
        currentStatus:0,
        recodeStatus: 0
      },
      tableData:[],
      pagination: {
        currentPage: 1,
        pageSize: 8,
        total: 0
      },
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getData(cb){
      let self= this,
      postData={
        name: self.search.name,
        cardId: self.search.cardid,
        pageSize: self.pagination.pageSize,
        currentPage: self.pagination.currentPage,
        status:self.mainActiveName,
        startTime: self.search.time[0]?self.search.time[0]:null,
        endTime: self.search.time[1]?self.search.time[1]:null
      };
      queryTreatments(postData).then(res=>{
        self.tableData = res.content.records;
        self.loading = false;
        self.pagination.total = res.content.total;
        cb&&cb()
      },error=>{
        self.loading = true;
      })
    },
    searchData() {
      let self = this;
      /**搜索提交 */
      this.pagination.currentPage = 1;
      this.getData(()=>{
        self.visible = false
      });
    },
    syschRecodeStatus(){
      this.getData()
    },
     handleSizeChange(size) {
      /**改变分页条数 */
      this.pagination.currentPage = 1;
      this.pagination.pageSize = size;
      this.getData();
    },
    handleCurrentChange(current) {
      /**改变分页页码 */
      this.pagination.currentPage = current;
      this.getData();
    },
    //点击叫号 
    calling(id){
      let self = this;
      calling(id).then(res=>{
        self.$message.success("叫号成功...");
        self.getData();
      })
    },
    /**打开问诊详情*/ 
    openDetail(item){
      let routeUrl = this.$router.resolve({
        path: "/inquiryRecordDetail",
        query: {id:item.id,providerId:item.providerId,bodyRecodeId:item.bodyRecodeId,idNo:item.providerInfo.idNo,registerNo:item.registerNo}
      });
      window.open(routeUrl.href,'_blank')
    }
  }


};
</script>
<style lang="stylus" scoped>
</style>